/*
 * @Author: your name
 * @Date: 2019-12-04 16:41:14
 * @LastEditTime: 2019-12-05 09:33:57
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \1926解军伟\放大镜\enlarge.js
 */

//放大镜效果
//逻辑关系

// 遮罩层尺寸/small_box尺寸 =  big_box尺寸/背景图尺寸

//做之前需确定图片尺寸大小  避免图片变形
//可以再css3里面修改尺寸 
// 也可以自动计算


class Enlarge {
    constructor() {
        this.init()
        this.bindEvent()
        this.setScale()

    }

    init() {
        //遮罩层
        this.yellow_box_ele = document.querySelector('.yellow-box')
        //容器
        this.container_ele = document.querySelector('.container')
        //小图盒子
        this.small_box_ele = document.querySelector('.small-box')

        //大图盒子
        this.big_box_ele = document.querySelector('.big-box')


        //获取小图盒子的宽高
        this.small_box_width = this.small_box_ele.offsetWidth
        this.small_box_height = this.small_box_ele.offsetHeight

        //获取容器的初始偏移
        this.cl = this.container_ele.offsetLeft
        this.ct = this.container_ele.offsetTop

        //获取遮罩层的宽高
        this.yw = parseInt(getComputedStyle(this.yellow_box_ele)['width'])
        this.yh = parseInt(getComputedStyle(this.yellow_box_ele)['height'])


        //获取小图图片
        this.small_box_img_ele = document.getElementById('small-img')

        // 大图的图片;
        this.big_box_img_ele = document.querySelector(".big-box img");
        this.big_img_width = parseInt(getComputedStyle(this.big_box_img_ele)['width'])
        this.big_img_height = parseInt(getComputedStyle(this.big_box_img_ele)['height'])

        //获取小图片列表
        this.img_btn_list = document.querySelectorAll('ul>li')

        //获取移动最大值
        this.max_left = this.small_box_width - this.yw
        this.max_top = this.small_box_height - this.yh
        //大盒子的宽高
        this._width = this.yw / this.small_box_width * parseInt(getComputedStyle(this.big_box_img_ele)['width'])
        this._height = this.yh / this.small_box_height * parseInt(getComputedStyle(this.big_box_img_ele)['height'])

        //图片数据
        this.img_list = [{
                small: './img/1.jpg',
                big: './img/1.big.jpg'
            },
            {
                small: './img/2.jpg',
                big: './img/2.big.jpg'
            }
        ]
        // console.log(this.img_list);

    }
    设置大盒子的尺寸
    setScale() {
        this.big_box_ele.style.width = this._width + 'px'
        this.big_box_ele.style.height = this._height + 'px'

    }
    bindEvent() {
        this.small_box_ele.addEventListener('mouseenter', () => {
            this.yellow_box_ele.style.display = 'block'
            this.big_box_ele.style.display = 'block'
        })
        this.big_box_ele.addEventListener('mouseleave', () => {
            this.yellow_box_ele.style.display = 'none'
            this.big_box_ele.style.display = 'none'
        })
        this.small_box_ele.addEventListener('mousemove', evt => {
            var e = evt || window.event
            this.follow(e)
            this.bigMove()
        })
        for (var i = 0; i < this.img_btn_list.length; i++) {
            this.img_btn_list[i].onclick = function (index) {
                this.changeImg(index)
            }.bind(this, i)
        }
    }

    follow(e) {
        var _left = e.clientX - this.cl - this.yw / 2
        var _top = e.clientY - this.ct - this.yh / 2
        // console.log(_left, _top);
        if (_left <= 0) {
            _left = 0
        }
        if (_top <= 0) {
            _top = 0
        }
        if (_left >= this.max_left) {
            _left = this.max_left
        }
        if (_top >= this.max_top) {
            _top = this.max_top
        }

        this.yellow_box_ele.style.left = _left + 'px'
        this.yellow_box_ele.style.top = _top + 'px'

        this.prop_left = _left / this.max_left
        this.prop_top = _top / this.max_top

    }


    bigMove() {

        this.big_box_img_ele.style.left = -this.prop_left * (this.big_img_width - this._width) + 'px'
        this.big_box_img_ele.style.top = -this.prop_top * (this.big_img_height - this._height) + 'px'
    }

    changeImg(index) {
        var data = this.img_list[index]
        this.small_box_img_ele.src = data.small
        this.big_box_img_ele.src = data.big
        // console.log(this.small_box_img_ele, this.big_box_img_ele)
    }
}